
* {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

.float_left {
	float: left;
}

@header_height: 12%;
header,
footer {
	display: block;
	width: 100%;
	height: @header_height;
	background: #CCC;
}

@section_height: 100% - @header_height*2;
section {
	width: 100%;
	height: @section_height;
	// background: red;
}

.show,
.form {
	display: inline-block;
	.float_left;
	width: 50%;
	height: 100%;
}

@form_color: #3CC;
@form_padding: 2em;
@form_shadow: 10px;
.form form {
	margin: 10%;
	padding: @form_padding;
	width: 50%;
	height: 60%;
	border-radius: @form_padding/6;
	box-shadow: @form_shadow @form_shadow @form_shadow rgba(111, 111, 111, 0.1);
	text-align: center;
	background: rgba(222, 222, 111, 0.5);
}
@input_margin: 3%;
@input_padding: 3%;
@input_width: 100% - @input_padding*2;
@input_height: (100% - @input_margin*8 - @input_padding*8)/4;
.form form input {
	margin: 0 0 @input_margin 0;
	padding: @input_padding;
	width: @input_width;
	height: @input_height;
	border: none;
	border-radius: 5px;
	font-size: 1.2em;
	background: rgb(250, 250, 250);
}

@text_color: #666;
.show {
	position: relative;
}
.show h1 {
	position: absolute;
	left: 20%;
	top: 22%;
	color: @text_color;
    -webkit-animation-name: move-h1;
    -webkit-animation-duration: 950ms;
    animation-name: move-h1;
    animation-duration: 950ms;
}
.show .show-content {
	position: absolute;
	left: 30%;
	top: 42%;
	width: 50%;
	color: @text_color;
	font-size: 1.2em;
    -webkit-animation-name: move-content;
    -webkit-animation-duration: 950ms;
    animation-name: move-content;
    animation-duration: 950ms;

}

header {
	position: relative;
}
header h1 {
	position: absolute;
	left: 10%;
	bottom: 10%;
}

@-webkit-keyframes move-content {
	0% {
		position: absolute;
		left: 20%;
		top: 42%;
	}
	100% {
		position: absolute;
		left: 30%;
		top: 42%;
	}
}
@keyframes move-content {
	0% {
		position: absolute;
		left: 20%;
		top: 42%;
	}
	100% {
		position: absolute;
		left: 30%;
		top: 42%;
	}
}
@-webkit-keyframes move-h1 {
	0% {
		position: absolute;
		left: 40%;
		top: 22%;
	}
	100% {
		position: absolute;
		left: 20%;
		top: 22%;
	}
}
@keyframes move-h1 {
	0% {
		position: absolute;
		left: 40%;
		top: 22%;
	}
	100% {
		position: absolute;
		left: 20%;
		top: 22%;
	}
}


